Day05——函式Function

2024 iThome 鐵人賽

DAY 5

佛心分享-IT 人自學之術

JavaScript自學分享系列第 5 篇

16th鐵人賽

姐姐恩

2024-09-16 23:29:39

72 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

Day05——函式

建立函式:

第一種:

function 函式名稱(參數名稱列表){  //可以無參數
函式內部程式   //不會立即執行
}

呼叫函式:式名稱(參數名稱列表);

第二種:

let 函式名稱=function(參數名稱列表){
函式內部程式
}

//特點:函式名稱就是變數名稱。

有參數 v.s 無參數:

有參數:參數名稱只用在函式內，不表示資料，可以當呼叫函式時，再填入實際資料，只是為了使函式使用上更彈性。(建立多個參數的函式也相同)
無參數:單純建立函式，無法在呼叫時，更改參數資料。

今日練習:
1.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript 流程控制：函式基礎</title>
    </head>
    <body>
        <script>
            //建立函式
            function test(){ //函式內
                console.log("Hello");
                console.log("World");
            } 
            //呼叫函式
            test(); //函式外
        </script>
    </body>
</html>

印出:

2.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript 流程控制：函式基礎</title>
    </head>
    <body>
        <script>
            //印出任意的資料(參數)
            function show(message){
                console.log(message);

            }
            show();
            show("Hello");
            show(10);
        </script>
    </body>
</html>

印出:

3.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript 流程控制：函式基礎</title>
    </head>
    <body>
        <script>
        // 做除法
        function divide(num1, num2){
            let result=num1/num2;
            console.log(result);
        }
        divide(3, 2);
        divide(10, 5);
        divide("Hello", "World");
        </script>
    </body>
</html>

印出:

另一種方式的除法函式:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript 流程控制：函式基礎</title>
    </head>
    <body>
        <script>
        //做除法的函式，另一種解
        let divide =function(num1, num2){
            let result=num1/num2;
            console.log(result);
        }
        divide(3, 2);
        divide(10, 5);
        divide("Hello", "World");
        </script>
    </body>
</html>

＊return 回傳值：強制結束函式，並帶出回傳值。（如果沒有回傳值將回傳undifined）
1.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript 流程控制：函式基礎</title>
    </head>
    <body>
        <script>
        // return用來結束函式
        function test(){
            return;
            console.log("Hello");
        }
        test();
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript 流程控制：函式基礎</title>
    </head>
    <body>
        <script>
        // return用來結束函式
        function test(){
            console.log("Hello");
            return;
        }
        let value =test();
        console.log(value);
        //用變數接收函式呼叫後的回傳值，並印出
        </script>
    </body>
</html>

印出:

改成：

return 3; //return 回傳值(回傳值可為任何資料)

印出:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript 流程控制：函式基礎</title>
    </head>
    <body>
        <script>
            function divide(n1, n2){
            let result=n1/n2;
            console.log(result); //第一個2
            return result;
        }
        let ans = divide(4, 2);
        console.log(ans); //第二個2
        </script>
    </body>
</html>

印出:

但當有額外的運算需求，就更適合用回傳值傳遞資料：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript 流程控制：函式基礎</title>
    </head>
    <body>
        <script>
        function divide(n1, n2){
            let result=n1/n2;
            return result; //運用回傳值傳遞資料
        }
        let ans = divide(4, 2);
        ans=ans*10;
        console.log(ans); 
        </script>
    </body>
</html>

＊要依照寫程式的需求，用回傳值傳遞資料。

學習資源：
函數基礎：定義與調用
 函數
 JavaScript 函式基礎 - Front End 網頁前端工程教學
 JavaScript 函式回傳值 - Front End 網頁前端工程教學

函式就練習到這邊～～明天見！